import { registerNode } from 'topology-core/middles'
import {
  flowData,
  flowDataAnchors,
  flowDataIconRect,
  flowDataTextRect,
  flowSubprocess,
  flowSubprocessIconRect,
  flowSubprocessTextRect,
  flowDb,
  flowDbIconRect,
  flowDbTextRect,
  flowDocument,
  flowDocumentAnchors,
  flowDocumentIconRect,
  flowDocumentTextRect,
  flowInternalStorage,
  flowInternalStorageIconRect,
  flowInternalStorageTextRect,
  flowExternStorage,
  flowExternStorageAnchors,
  flowExternStorageIconRect,
  flowExternStorageTextRect,
  flowQueue,
  flowQueueIconRect,
  flowQueueTextRect,
  flowManually,
  flowManuallyAnchors,
  flowManuallyIconRect,
  flowManuallyTextRect,
  flowDisplay,
  flowDisplayAnchors,
  flowDisplayIconRect,
  flowDisplayTextRect,
  flowParallel,
  flowParallelAnchors,
  flowComment,
  flowCommentAnchors
} from 'topology-flow-diagram'

import {
  activityFinal,
  activityFinalIconRect,
  activityFinalTextRect,
  swimlaneV,
  swimlaneVIconRect,
  swimlaneVTextRect,
  swimlaneH,
  swimlaneHIconRect,
  swimlaneHTextRect,
  fork,
  forkHAnchors,
  forkIconRect,
  forkTextRect,
  forkVAnchors
} from 'topology-activity-diagram'
import {
  simpleClass,
  simpleClassIconRect,
  simpleClassTextRect,
  interfaceClass,
  interfaceClassIconRect,
  interfaceClassTextRect
} from 'topology-class-diagram'
import {
  lifeline,
  lifelineAnchors,
  lifelineIconRect,
  lifelineTextRect,
  sequenceFocus,
  sequenceFocusAnchors,
  sequenceFocusIconRect,
  sequenceFocusTextRect
} from 'topology-sequence-diagram'

export function canvasRegister() {
  registerNode(
    'flowData',
    flowData,
    flowDataAnchors,
    flowDataIconRect,
    flowDataTextRect
  )
  registerNode(
    'flowSubprocess',
    flowSubprocess,
    null,
    flowSubprocessIconRect,
    flowSubprocessTextRect
  )
  registerNode('flowDb', flowDb, null, flowDbIconRect, flowDbTextRect)
  registerNode(
    'flowDocument',
    flowDocument,
    flowDocumentAnchors,
    flowDocumentIconRect,
    flowDocumentTextRect
  )
  registerNode(
    'flowInternalStorage',
    flowInternalStorage,
    null,
    flowInternalStorageIconRect,
    flowInternalStorageTextRect
  )
  registerNode(
    'flowExternStorage',
    flowExternStorage,
    flowExternStorageAnchors,
    flowExternStorageIconRect,
    flowExternStorageTextRect
  )
  registerNode(
    'flowQueue',
    flowQueue,
    null,
    flowQueueIconRect,
    flowQueueTextRect
  )
  registerNode(
    'flowManually',
    flowManually,
    flowManuallyAnchors,
    flowManuallyIconRect,
    flowManuallyTextRect
  )
  registerNode(
    'flowDisplay',
    flowDisplay,
    flowDisplayAnchors,
    flowDisplayIconRect,
    flowDisplayTextRect
  )
  registerNode('flowParallel', flowParallel, flowParallelAnchors, null, null)
  registerNode('flowComment', flowComment, flowCommentAnchors, null, null)

  // activity
  registerNode(
    'activityFinal',
    activityFinal,
    null,
    activityFinalIconRect,
    activityFinalTextRect
  )
  registerNode(
    'swimlaneV',
    swimlaneV,
    null,
    swimlaneVIconRect,
    swimlaneVTextRect
  )
  registerNode(
    'swimlaneH',
    swimlaneH,
    null,
    swimlaneHIconRect,
    swimlaneHTextRect
  )
  registerNode('forkH', fork, forkHAnchors, forkIconRect, forkTextRect)
  registerNode('forkV', fork, forkVAnchors, forkIconRect, forkTextRect)

  // class
  registerNode(
    'simpleClass',
    simpleClass,
    null,
    simpleClassIconRect,
    simpleClassTextRect
  )
  registerNode(
    'interfaceClass',
    interfaceClass,
    null,
    interfaceClassIconRect,
    interfaceClassTextRect
  )

  // sequence
  registerNode(
    'lifeline',
    lifeline,
    lifelineAnchors,
    lifelineIconRect,
    lifelineTextRect
  )
  registerNode(
    'sequenceFocus',
    sequenceFocus,
    sequenceFocusAnchors,
    sequenceFocusIconRect,
    sequenceFocusTextRect
  )
}

export const Tools = [
  {
    group: '基本设备',
    children: [
      {
        name: '发电机',
        icon: 'icon-zbfadianji',
        data: {
          id: '发电机',
          text: '发电机',
          rect: {
            width: 120,
            height: 120
          },
          paddingLeft: 10,
          paddingRight: 10,
          paddingTop: 10,
          paddingBottom: 10,
          name: 'image',
          icon: '\ue102',
          iconFamily: 'iconfont',
          iconColor: '#1CF0F2'
        }
      },
      {
        name: '功率流向上',
        icon: 'icon-gonglvup',
        data: {
          id: '功率流向上',
          text: '上',
          rect: {
            width: 80,
            height: 80
          },
          paddingLeft: 10,
          paddingRight: 10,
          paddingTop: 10,
          paddingBottom: 10,
          name: 'image',
          icon: '\ue901',
          iconFamily: 'iconfont',
          iconColor: '#0CF934'
        }
      },
      {
        name: '功率流向下',
        icon: 'icon-gonglvdown',
        data: {
          id: '功率流向下',
          text: '下',
          rect: {
            width: 80,
            height: 80
          },
          paddingLeft: 10,
          paddingRight: 10,
          paddingTop: 10,
          paddingBottom: 10,
          name: 'image',
          icon: '\ue919',
          iconFamily: 'iconfont',
          iconColor: '#0CF934'
        }
      },
      {
        name: '功率流向左',
        icon: 'icon-gonglvleft',
        data: {
          id: '功率流向左',
          text: '左',
          rect: {
            width: 80,
            height: 80
          },
          paddingLeft: 10,
          paddingRight: 10,
          paddingTop: 10,
          paddingBottom: 10,
          name: 'image',
          icon: '\ue906',
          iconFamily: 'iconfont',
          iconColor: '#0CF934'
        }
      },
      {
        name: '功率流向右',
        icon: 'icon-gonglvright',
        data: {
          id: '功率流右',
          text: '右',
          rect: {
            width: 80,
            height: 80
          },
          paddingLeft: 10,
          paddingRight: 10,
          paddingTop: 10,
          paddingBottom: 10,
          name: 'image',
          icon: '\ue900',
          iconFamily: 'iconfont',
          iconColor: '#0CF934'
        }
      },
      {
        name: '连线',
        icon: 'icon-dianzu',
        data: {
          id: '连线',
          text: '',
          rect: {
            width: 40,
            height: 40
          },
          paddingLeft: 10,
          paddingRight: 10,
          paddingTop: 10,
          paddingBottom: 10,
          name: 'image',
          icon: '\ue63c',
          iconFamily: 'iconfont',
          iconColor: '#1CF0F2'
        }
      },
      {
        name: '服务器运行',
        icon: 'icon-computers',
        data: {
          id: '服务器',
          text: '',
          rect: {
            width: 40,
            height: 40
          },
          paddingLeft: 10,
          paddingRight: 10,
          paddingTop: 10,
          paddingBottom: 10,
          name: 'image',
          icon: '\ue60e',
          iconFamily: 'iconfont',
          iconColor: '#F11B32'
        }
      },
      {
        name: '服务器关闭',
        icon: 'icon-computers',
        data: {
          id: '服务器',
          text: '',
          rect: {
            width: 40,
            height: 40
          },
          paddingLeft: 10,
          paddingRight: 10,
          paddingTop: 10,
          paddingBottom: 10,
          name: 'image',
          icon: '\ue60e',
          iconFamily: 'iconfont',
          iconColor: '#000000'
        }
      },
      {
        name: '打印机',
        icon: 'icon-dayinji',
        data: {
          id: '打印机',
          text: '',
          rect: {
            width: 40,
            height: 40
          },
          paddingLeft: 10,
          paddingRight: 10,
          paddingTop: 10,
          paddingBottom: 10,
          name: 'image',
          icon: '\ue611',
          iconFamily: 'iconfont',
          iconColor: '#282222'
        }
      },
      {
        name: '终端运行',
        icon: 'icon-zbzhilengshebei',
        data: {
          id: '终端运行',
          text: '终端运行',
          rect: {
            width: 120,
            height: 120
          },
          paddingLeft: 10,
          paddingRight: 10,
          paddingTop: 10,
          paddingBottom: 10,
          name: 'image',
          icon: '\ue64a',
          iconFamily: 'iconfont',
          iconColor: '#D72A2A'
        }
      },
      {
        name: '终端断开',
        icon: 'icon-zbzhilengshebei',
        data: {
          id: '终端断开',
          text: '终端断开',
          rect: {
            width: 120,
            height: 120
          },
          paddingLeft: 10,
          paddingRight: 10,
          paddingTop: 10,
          paddingBottom: 10,
          name: 'image',
          icon: '\ue64a',
          iconFamily: 'iconfont',
          iconColor: '#282222'
        }
      },
      {
        name: '控制器',
        icon: 'icon-kongzhiqi',
        data: {
          id: '控制器',
          text: '',
          rect: {
            width: 40,
            height: 40
          },
          paddingLeft: 10,
          paddingRight: 10,
          paddingTop: 10,
          paddingBottom: 10,
          name: 'image',
          icon: '\ue62d',
          iconFamily: 'iconfont',
          iconColor: '#000000'
        }
      },
      {
        name: '交换机',
        icon: 'icon-jiaohuanji',
        data: {
          id: '交换机',
          text: '',
          rect: {
            width: 40,
            height: 40
          },
          paddingLeft: 10,
          paddingRight: 10,
          paddingTop: 10,
          paddingBottom: 10,
          name: 'image',
          icon: '\ue646',
          iconFamily: 'iconfont',
          iconColor: '#000000'
        }
      },
      {
        name: '电视',
        icon: 'icon-dianshi1',
        data: {
          id: '电视',
          text: '电视',
          rect: {
            width: 120,
            height: 120
          },
          paddingLeft: 10,
          paddingRight: 10,
          paddingTop: 10,
          paddingBottom: 10,
          name: 'image',
          icon: '\ue605',
          iconFamily: 'iconfont',
          iconColor: '#2f54eb'
        }
      },
      {
        name: '大电网',
        icon: 'icon-zu',
        data: {
          id: '大电网',
          text: '大电网',
          rect: {
            width: 120,
            height: 120
          },
          paddingLeft: 10,
          paddingRight: 10,
          paddingTop: 10,
          paddingBottom: 10,
          name: 'image',
          icon: '\ue61c',
          iconFamily: 'iconfont',
          iconColor: '#2f54eb'
        }
      },
      {
        name: '开关开',
        // icon: 'icon-fork-v',
        icon: 'icon-kaiguanguan',
        data: {
          id: '开关',
          text: '开关开',
          type: '穆琼',
          rect: {
            width: 10,
            height: 20
          },
          name: 'forkV',
          fillStyle: '#20F809',
          strokeStyle: 'transparent'
        }
      },
      {
        name: '开关',
        // icon: 'icon-fork-v',
        icon: 'icon-kaiguanguan1',
        data: {
          id: '开关闭',
          text: '开关闭',
          type: '白璐',
          rect: {
            width: 10,
            height: 20
          },
          name: 'forkV',
          fillStyle: '#F82E09',
          strokeStyle: 'transparent'
        }
      },
      // {
      //   name: '开关开',
      //   icon: 'icon-kaiguanguan',
      //   data: {
      //     id: '开关开',
      //     text: '开关开',
      //     rect: {
      //       width: 100,
      //       height: 100
      //     },
      //     paddingLeft: 5,
      //     paddingRight: 5,
      //     paddingTop: 5,
      //     paddingBottom: 5,
      //     name: 'image',
      //     icon: '\ue601',
      //     iconFamily: 'iconfont',
      //     iconColor: '#FF0000'
      //   }
      // },
      // {
      //   name: '开关关',
      //   icon: 'icon-kaiguanguan1',
      //   data: {
      //     id: '开关关',
      //     text: '开关关',
      //     rect: {
      //       width: 120,
      //       height: 120
      //     },
      //     paddingLeft: 10,
      //     paddingRight: 10,
      //     paddingTop: 10,
      //     paddingBottom: 10,
      //     name: 'image',
      //     icon: '\ue600',
      //     iconFamily: 'iconfont',
      //     iconColor: '#00FF00'
      //   }
      // },
      {
        name: '空调',
        icon: 'icon-zbkongtiao',
        data: {
          id: '空调',
          text: '空调',
          rect: {
            width: 120,
            height: 120
          },
          paddingLeft: 10,
          paddingRight: 10,
          paddingTop: 10,
          paddingBottom: 10,
          name: 'image',
          icon: '\ue632',
          iconFamily: 'iconfont',
          iconColor: '#2f54eb'
        }
      },
      {
        name: '制冷设备',
        icon: 'icon-zbzhilengshebei',
        data: {
          id: '制冷设备',
          text: '制冷设备',
          rect: {
            width: 120,
            height: 120
          },
          paddingLeft: 10,
          paddingRight: 10,
          paddingTop: 10,
          paddingBottom: 10,
          name: 'image',
          icon: '\ue64a',
          iconFamily: 'iconfont',
          iconColor: '#2f54eb'
        }
      },
      {
        name: '蓄电池',
        icon: 'icon-zbdianchi',
        data: {
          id: '蓄电池',
          text: '蓄电池',
          rect: {
            width: 120,
            height: 120
          },
          paddingLeft: 10,
          paddingRight: 10,
          paddingTop: 10,
          paddingBottom: 10,
          name: 'image',
          icon: '\ue62a',
          iconFamily: 'iconfont',
          iconColor: '#2f54eb'
        }
      },
      {
        name: '风机',
        icon: 'icon-zbfengji',
        data: {
          id: '风机',
          text: '风机',
          rect: {
            width: 120,
            height: 120
          },
          paddingLeft: 10,
          paddingRight: 10,
          paddingTop: 10,
          paddingBottom: 10,
          name: 'image',
          icon: '\ueb49',
          iconFamily: 'iconfont',
          iconColor: '#2f54eb'
        }
      },
      {
        name: '光伏电站',
        icon: 'icon-zbguangfudianzhan',
        data: {
          id: '光伏电站',
          text: '光伏电站',
          rect: {
            width: 120,
            height: 120
          },
          paddingLeft: 10,
          paddingRight: 10,
          paddingTop: 10,
          paddingBottom: 10,
          name: 'image',
          icon: '\ue63b',
          iconFamily: 'iconfont',
          iconColor: '#2f54eb'
        }
      },
      {
        name: '帅哥',
        icon: 'icon-zbpeople',
        data: {
          id: '帅哥',
          text: '帅哥',
          rect: {
            width: 120,
            height: 120
          },
          paddingLeft: 10,
          paddingRight: 10,
          paddingTop: 10,
          paddingBottom: 10,
          name: 'image',
          icon: '\ue101',
          iconFamily: 'iconfont',
          iconColor: '#2f54eb'
        }
      },
      {
        name: '正方形',
        icon: 'icon-rect',
        data: {
          id: '正方形',
          text: '正方形',
          rect: {
            width: 120,
            height: 120
          },
          paddingLeft: 10,
          paddingRight: 10,
          paddingTop: 10,
          paddingBottom: 10,
          name: 'rectangle',
          icon: '\ue64d',
          iconFamily: 'topology',
          iconColor: '#2f54eb'
        }
      },
      {
        name: 'rectangle',
        icon: 'icon-rectangle',
        data: {
          id: '矩形',
          text: '矩形',
          rect: {
            width: 200,
            height: 50
          },
          font: {
            fontFamily: 'Arial',
            color: '#F8FAFA',
            fontWeight: 'bold'
          },
          strokeStyle: '#1CF0F2',
          lineWidth: 1,
          strokedasharray: '10,10',
          paddingLeft: 10,
          paddingRight: 10,
          paddingTop: 10,
          paddingBottom: 10,
          borderRadius: 0.1,

          name: 'rectangle'
        }
      },
      {
        name: 'circle',
        icon: 'icon-circle',
        data: {
          id: '圆',
          text: '圆',
          rect: {
            width: 100,
            height: 100
          },
          name: 'circle',
          textMaxLine: 1
        }
      },
      {
        name: 'triangle',
        icon: 'icon-triangle',
        data: {
          id: '三角形',
          text: '三角形',
          rect: {
            width: 100,
            height: 100
          },
          name: 'triangle'
        }
      },
      {
        name: 'diamond',
        icon: 'icon-diamond',
        data: {
          id: '菱形',
          text: '菱形',
          rect: {
            width: 100,
            height: 100
          },
          name: 'diamond'
        }
      },
      {
        name: 'pentagon',
        icon: 'icon-pentagon',
        data: {
          id: '五边形',
          text: '五边形',
          rect: {
            width: 100,
            height: 100
          },
          name: 'pentagon'
        }
      },
      {
        name: 'hexagon',
        icon: 'icon-hexagon',
        data: {
          id: '六边形',
          text: '六边形',
          rect: {
            width: 100,
            height: 100
          },
          paddingTop: 10,
          paddingBottom: 10,
          name: 'hexagon'
        }
      },
      {
        name: 'pentagram',
        icon: 'icon-pentagram',
        data: {
          id: '五角星',
          text: '五角星',
          rect: {
            width: 100,
            height: 100
          },
          name: 'pentagram'
        }
      },
      {
        name: 'leftArrow',
        icon: 'icon-arrow-left',
        data: {
          id: '左箭头',
          text: '左箭头',
          rect: {
            width: 200,
            height: 100
          },
          name: 'leftArrow'
        }
      },
      {
        name: 'rightArrow',
        icon: 'icon-arrow-right',
        data: {
          id: '右箭头',
          text: '右箭头',
          rect: {
            width: 200,
            height: 100
          },
          name: 'rightArrow'
        }
      },
      {
        name: 'twowayArrow',
        icon: 'icon-twoway-arrow',
        data: {
          id: '双向箭头',
          text: '双向箭头',
          rect: {
            width: 200,
            height: 100
          },
          name: 'twowayArrow'
        }
      },
      {
        name: '直线',
        icon: 'icon-line',
        data: {
          id: '直线',
          text: '直线',
          rect: {
            width: 100,
            height: 100
          },
          name: 'line',
          borderWidth: 10,
          // boderColor: '#DC143C',
          borderColor: '#F8FAFA',
          icon: '\ue64d',
          iconFamily: 'topology',
          iconColor: '#fff'
        }
      },
      {
        name: 'cloud',
        icon: 'icon-cloud',
        data: {
          id: '云',
          text: '云',
          rect: {
            width: 100,
            height: 100
          },
          name: 'cloud'
        }
      },
      {
        name: 'message',
        icon: 'icon-msg',
        data: {
          id: '消息框',
          text: '消息框',
          rect: {
            width: 100,
            height: 100
          },
          paddingLeft: 10,
          paddingRight: 10,
          paddingTop: 10,
          paddingBottom: 10,
          name: 'message'
        }
      },
      {
        name: 'file',
        icon: 'icon-file',
        data: {
          id: '文档',
          text: '文档',
          rect: {
            width: 80,
            height: 100
          },
          paddingLeft: 10,
          paddingRight: 10,
          paddingTop: 10,
          paddingBottom: 10,
          name: 'file'
        }
      },
      {
        name: 'text',
        icon: 'icon-text',
        data: {
          id: '文本',
          text: '文本',
          rect: {
            width: 160,
            height: 30
          },
          name: 'text',
          font: {
            fontFamily: 'Arial',
            color: '#F8FAFA',
            fontWeight: 'bold'
          },
          fillStyle: '#f8f8f8',
          strokeStyle: '#7e1212'
        }
      },
      {
        name: 'image',
        icon: 'icon-image',
        data: {
          id: '图片',
          text: '',
          rect: {
            width: 100,
            height: 100
          },
          name: 'image',
          image: '/assets/img/logo.png'
        }
      },
      {
        name: 'cube',
        icon: 'icon-cube',
        data: {
          rect: {
            width: 50,
            height: 70
          },
          is3D: true,
          z: 10,
          zRotate: 15,
          fillStyle: '#ddd',
          name: 'cube',
          icon: '\ue63c',
          iconFamily: 'topology',
          iconColor: '#777',
          iconSize: 30
        }
      },
      {
        name: 'people',
        icon: 'icon-people',
        data: {
          rect: {
            width: 70,
            height: 100
          },
          name: 'people'
        }
      },
      {
        name: '视频/网页',
        icon: 'icon-pc',
        data: {
          id: '视频',
          text: '视频/网页',
          rect: {
            width: 200,
            height: 200
          },
          paddingLeft: 10,
          paddingRight: 10,
          paddingTop: 10,
          paddingBottom: 10,
          // strokeStyle: 'transparent',
          name: 'div'
        }
      }
    ]
  },

  {
    group: '电线设备',
    children: [
      {
        name: '开始',
        icon: 'icon-inital',
        data: {
          id: '',
          text: '',
          rect: {
            width: 30,
            height: 30
          },
          name: 'circle',
          fillStyle: '#555',
          strokeStyle: 'transparent'
        }
      },
      {
        name: '结束',
        icon: 'icon-final',
        data: {
          id: '',
          text: '',
          rect: {
            width: 30,
            height: 30
          },
          name: 'activityFinal'
        }
      },
      {
        name: '活动',
        icon: 'icon-action',
        data: {
          id: '活动',
          text: '活动',
          rect: {
            width: 120,
            height: 50
          },
          borderRadius: 0.25,
          name: 'rectangle'
        }
      },
      {
        name: '决策/合并',
        icon: 'icon-diamond',
        data: {
          id: '决策',
          text: '决策',
          rect: {
            width: 120,
            height: 50
          },
          name: 'diamond'
        }
      },
      {
        name: '垂直泳道',
        icon: 'icon-swimlane-v',
        data: {
          id: '垂直泳道',
          text: '垂直泳道',
          rect: {
            width: 200,
            height: 500
          },
          name: 'swimlaneV'
        }
      },
      {
        name: '水平泳道',
        icon: 'icon-swimlane-h',
        data: {
          id: '水平泳道',
          text: '水平泳道',
          rect: {
            width: 500,
            height: 100
          },
          name: 'swimlaneH'
        }
      },

      {
        name: '电',
        // icon: 'icon-fork-v',
        icon: 'icon-shuxian1',
        data: {
          id: '电线',
          text: '',
          rect: {
            width: 2,
            height: 100
          },
          name: 'forkV',
          fillStyle: '#080DF8',
          strokeStyle: 'transparent'
        }
      },
      {
        name: '光',
        icon: 'icon-shuxian2',
        data: {
          id: '光线',
          text: '光线',
          rect: {
            width: 2,
            height: 100
          },
          name: 'forkV',
          fillStyle: '#808000',
          strokeStyle: 'transparent'
        }
      },
      {
        name: '冷',
        icon: 'icon-shuxian3',
        data: {
          id: '冷线',
          text: '冷线',
          rect: {
            width: 2,
            height: 100
          },
          name: 'forkV',
          fillStyle: '#1CF0F2',
          strokeStyle: 'transparent'
        }
      },
      {
        name: '热',
        icon: 'icon-shuxian4',
        data: {
          id: '热线',
          text: '',
          rect: {
            width: 2,
            height: 100
          },
          name: 'forkV',
          fillStyle: '#FF0000',
          strokeStyle: 'transparent'
        }
      },
      {
        name: '电',
        icon: 'icon-fork',
        // icon: 'icon-hengxian1',
        data: {
          id: '电线',
          text: '',
          rect: {
            width: 100,
            height: 2
          },
          name: 'forkH',
          fillStyle: '#080DF8',
          strokeStyle: 'transparent'
        }
      },
      {
        name: '光',
        icon: 'icon-fork',
        data: {
          id: '光线',
          text: '光线',
          rect: {
            width: 100,
            height: 2
          },
          name: 'forkH',
          fillStyle: '#808000',
          strokeStyle: 'transparent'
        }
      },
      {
        name: '冷',
        icon: 'icon-fork',
        data: {
          id: '冷线',
          text: '冷线',
          rect: {
            width: 100,
            height: 2
          },
          name: 'forkH',
          // fillStyle: '#00008B',
          fillStyle: '#1CF0F2',

          strokeStyle: 'transparent'
        }
      },
      {
        name: '热',
        icon: 'icon-fork',
        data: {
          id: '热线',
          text: '',
          rect: {
            width: 100,
            height: 2
          },
          name: 'forkH',
          fillStyle: '#FF0000',
          strokeStyle: 'transparent'
        }
      },
      {
        name: '线路断',
        icon: 'icon-shuxian4',
        data: {
          id: '线路',
          text: '线路断',
          rect: {
            width: 10,
            height: 150
          },
          name: 'forkV',
          fillStyle: '#5D5353',
          strokeStyle: 'transparent'
        }
      },
      {
        name: '线路通',
        icon: 'icon-shuxian4',
        data: {
          id: '线路',
          text: '线路通',
          rect: {
            width: 10,
            height: 150
          },
          name: 'forkV',
          fillStyle: '#FF0000',
          strokeStyle: 'transparent'
        }
      },
      {
        name: '线路通',
        icon: 'icon-fork',
        data: {
          id: '线路通',
          text: '线路通',
          rect: {
            width: 500,
            height: 10
          },
          name: 'forkH',
          fillStyle: '#FF0000',
          strokeStyle: 'transparent'
        }
      },
      {
        name: '线路断',
        icon: 'icon-fork',
        data: {
          id: '线路断',
          text: '线路断',
          rect: {
            width: 500,
            height: 10
          },
          name: 'forkH',
          fillStyle: '#5D5353',
          strokeStyle: 'transparent'
        }
      }
    ]
  },
  {
    group: '高级设备',
    children: [
      {
        name: '开始/结束',
        icon: 'icon-flow-start',
        data: {
          id: '开始',
          text: '开始',
          rect: {
            width: 120,
            height: 40
          },
          borderRadius: 0.5,
          name: 'rectangle'
        }
      },
      {
        name: '流程',
        icon: 'icon-rectangle',
        data: {
          id: '流程',
          text: '流程',
          rect: {
            width: 120,
            height: 40
          },
          name: 'rectangle'
        }
      },
      {
        name: '判定',
        icon: 'icon-diamond',
        data: {
          id: '判定',
          text: '判定',
          rect: {
            width: 120,
            height: 60
          },
          name: 'diamond'
        }
      },
      {
        name: '数据',
        icon: 'icon-flow-data',
        data: {
          id: '数据',
          text: '数据',
          rect: {
            width: 120,
            height: 50
          },
          name: 'flowData'
        }
      },
      {
        name: '准备',
        icon: 'icon-flow-ready',
        data: {
          id: '准备',
          text: '准备',
          rect: {
            width: 120,
            height: 50
          },
          name: 'hexagon'
        }
      },
      {
        name: '子流程',
        icon: 'icon-flow-subprocess',
        data: {
          id: '子流程',
          text: '子流程',
          rect: {
            width: 120,
            height: 50
          },
          name: 'flowSubprocess'
        }
      },
      {
        name: '数据库',
        icon: 'icon-db',
        data: {
          id: '数据库',
          text: '数据库',
          rect: {
            width: 80,
            height: 120
          },
          name: 'flowDb'
        }
      },
      {
        name: '文档',
        icon: 'icon-flow-document',
        data: {
          id: '文档',
          text: '文档',
          rect: {
            width: 120,
            height: 100
          },
          name: 'flowDocument'
        }
      },
      {
        name: '内部存储',
        icon: 'icon-internal-storage',
        data: {
          id: '内部存储',
          text: '内部存储',
          rect: {
            width: 120,
            height: 80
          },
          name: 'flowInternalStorage'
        }
      },
      {
        name: '外部存储',
        icon: 'icon-extern-storage',
        data: {
          id: '外部存储',
          text: '外部存储',
          rect: {
            width: 120,
            height: 80
          },
          name: 'flowExternStorage'
        }
      },
      {
        name: '队列',
        icon: 'icon-flow-queue',
        data: {
          id: '队列',
          text: '队列',
          rect: {
            width: 100,
            height: 100
          },
          name: 'flowQueue'
        }
      },
      {
        name: '手动输入',
        icon: 'icon-flow-manually',
        data: {
          id: '手动输入',
          text: '手动输入',
          rect: {
            width: 120,
            height: 80
          },
          name: 'flowManually'
        }
      },
      {
        name: '展示',
        icon: 'icon-flow-display',
        data: {
          id: '展示',
          text: '展示',
          rect: {
            width: 120,
            height: 80
          },
          name: 'flowDisplay'
        }
      },
      {
        name: '并行模式',
        icon: 'icon-flow-parallel',
        data: {
          id: '并行模式',
          text: '并行模式',
          rect: {
            width: 120,
            height: 50
          },
          name: 'flowParallel'
        }
      },
      {
        name: '注释',
        icon: 'icon-flow-comment',
        data: {
          id: '注释',
          text: '注释',
          rect: {
            width: 100,
            height: 100
          },
          name: 'flowComment'
        }
      }
    ]
  },
  {
    group: '其他设备',
    children: [
      {
        name: '生命线',
        icon: 'icon-lifeline',
        data: {
          id: '生命线',
          text: '生命线',
          rect: {
            width: 150,
            height: 400
          },
          name: 'lifeline'
        }
      },
      {
        name: '激活',
        icon: 'icon-focus',
        data: {
          id: '激活',
          text: '',
          rect: {
            width: 12,
            height: 200
          },
          name: 'sequenceFocus'
        }
      },
      {
        name: '简单类',
        icon: 'icon-simple-class',
        data: {
          id: '简单类',
          text: 'Topolgoy',
          rect: {
            width: 270,
            height: 200
          },
          paddingTop: 40,
          font: {
            fontFamily: 'Arial',
            color: '#222',
            fontWeight: 'bold'
          },
          fillStyle: '#ffffba',
          strokeStyle: '#7e1212',
          name: 'simpleClass'
          // children: [
          //   {
          //     text: '- name: string\n+ setName(name: string): void',
          //     name: 'text',
          //     paddingLeft: 10,
          //     paddingRight: 10,
          //     paddingTop: 10,
          //     paddingBottom: 10,
          //     rectInParent: {
          //       x: 0,
          //       y: 0,
          //       width: '100%',
          //       height: '100%',
          //       rotate: 0
          //     },
          //     font: {
          //       fontFamily: 'Arial',
          //       color: '#222',
          //       textAlign: 'left',
          //       textBaseline: 'top'
          //     }
          //   }
          // ]
        }
      },
      {
        name: '类',
        icon: 'icon-class',
        data: {
          id: '类',
          text: 'Topolgoy',
          rect: {
            width: 270,
            height: 200
          },
          paddingTop: 40,
          font: {
            fontFamily: 'Arial',
            color: '#222',
            fontWeight: 'bold'
          },
          fillStyle: '#ffffba',
          strokeStyle: '#7e1212',
          name: 'interfaceClass',
          children: [
            {
              text: '- name: string',
              name: 'text',
              paddingLeft: 10,
              paddingRight: 10,
              paddingTop: 10,
              paddingBottom: 10,
              rectInParent: {
                x: 0,
                y: 0,
                width: '100%',
                height: '50%',
                rotate: 0
              },
              font: {
                fontFamily: 'Arial',
                color: '#222',
                textAlign: 'left',
                textBaseline: 'top'
              }
            },
            {
              text: '+ setName(name: string): void',
              name: 'text',
              paddingLeft: 10,
              paddingRight: 10,
              paddingTop: 10,
              paddingBottom: 10,
              rectInParent: {
                x: 0,
                y: '50%',
                width: '100%',
                height: '50%',
                rotate: 0
              },
              font: {
                fontFamily: 'Arial',
                color: '#222',
                textAlign: 'left',
                textBaseline: 'top'
              }
            }
          ]
        }
      }
    ]
  }
]
// export const Tools = [
//   {
//     group: '基本设备',
//     children: [
//       {
//         name: '发电机',
//         icon: 'icon-zbfadianji',
//         data: {
//           id: '发电机',
//           text: '发电机',
//           rect: {
//             width: 120,
//             height: 120
//           },
//           paddingLeft: 10,
//           paddingRight: 10,
//           paddingTop: 10,
//           paddingBottom: 10,
//           name: 'image',
//           // icon: '\ue102',
//           iconFamily: 'iconfont',
//           iconColor: '#1CF0F2'
//         }
//       },
//       {
//         name: '功率流向上',
//         icon: 'icon-gonglvup',
//         data: {
//           id: '功率流向上',
//           text: '上',
//           rect: {
//             width: 80,
//             height: 80
//           },
//           paddingLeft: 10,
//           paddingRight: 10,
//           paddingTop: 10,
//           paddingBottom: 10,
//           name: 'image',
//           // icon: '\ue901',
//           iconFamily: 'iconfont',
//           iconColor: '#0CF934'
//         }
//       },
//       {
//         name: '功率流向下',
//         icon: 'icon-gonglvdown',
//         data: {
//           id: '功率流向下',
//           text: '下',
//           rect: {
//             width: 80,
//             height: 80
//           },
//           paddingLeft: 10,
//           paddingRight: 10,
//           paddingTop: 10,
//           paddingBottom: 10,
//           name: 'image',

//           iconFamily: 'iconfont',
//           iconColor: '#0CF934'
//         }
//       },
//       {
//         name: '功率流向左',
//         icon: 'icon-gonglvleft',
//         data: {
//           id: '功率流向左',
//           text: '左',
//           rect: {
//             width: 80,
//             height: 80
//           },
//           paddingLeft: 10,
//           paddingRight: 10,
//           paddingTop: 10,
//           paddingBottom: 10,
//           name: 'image',

//           iconFamily: 'iconfont',
//           iconColor: '#0CF934'
//         }
//       },
//       {
//         name: '功率流向右',
//         icon: 'icon-gonglvright',
//         data: {
//           id: '功率流右',
//           text: '右',
//           rect: {
//             width: 80,
//             height: 80
//           },
//           paddingLeft: 10,
//           paddingRight: 10,
//           paddingTop: 10,
//           paddingBottom: 10,
//           name: 'image',

//           iconFamily: 'iconfont',
//           iconColor: '#0CF934'
//         }
//       },
//       {
//         name: '连线',
//         icon: 'icon-dianzu',
//         data: {
//           id: '连线',
//           text: '',
//           rect: {
//             width: 40,
//             height: 40
//           },
//           paddingLeft: 10,
//           paddingRight: 10,
//           paddingTop: 10,
//           paddingBottom: 10,
//           name: 'image',

//           iconFamily: 'iconfont',
//           iconColor: '#000000'
//         }
//       },
//       {
//         name: '服务器运行',
//         icon: 'icon-computers',
//         data: {
//           id: '服务器',
//           text: '',
//           rect: {
//             width: 40,
//             height: 40
//           },
//           paddingLeft: 10,
//           paddingRight: 10,
//           paddingTop: 10,
//           paddingBottom: 10,
//           name: 'image',

//           iconFamily: 'iconfont',
//           iconColor: '#F11B32'
//         }
//       },
//       {
//         name: '服务器关闭',
//         icon: 'icon-computers',
//         data: {
//           id: '服务器',
//           text: '',
//           rect: {
//             width: 40,
//             height: 40
//           },
//           paddingLeft: 10,
//           paddingRight: 10,
//           paddingTop: 10,
//           paddingBottom: 10,
//           name: 'image',

//           iconFamily: 'iconfont',
//           iconColor: '#000000'
//         }
//       },
//       {
//         name: '打印机',
//         icon: 'icon-dayinji',
//         data: {
//           id: '打印机',
//           text: '',
//           rect: {
//             width: 40,
//             height: 40
//           },
//           paddingLeft: 10,
//           paddingRight: 10,
//           paddingTop: 10,
//           paddingBottom: 10,
//           name: 'image',

//           iconFamily: 'iconfont',
//           iconColor: '#282222'
//         }
//       },
//       {
//         name: '终端运行',
//         icon: 'icon-zbzhilengshebei',
//         data: {
//           id: '终端运行',
//           text: '终端运行',
//           rect: {
//             width: 120,
//             height: 120
//           },
//           paddingLeft: 10,
//           paddingRight: 10,
//           paddingTop: 10,
//           paddingBottom: 10,
//           name: 'image',

//           iconFamily: 'iconfont',
//           iconColor: '#D72A2A'
//         }
//       },
//       {
//         name: '终端断开',
//         icon: 'icon-zbzhilengshebei',
//         data: {
//           id: '终端断开',
//           text: '终端断开',
//           rect: {
//             width: 120,
//             height: 120
//           },
//           paddingLeft: 10,
//           paddingRight: 10,
//           paddingTop: 10,
//           paddingBottom: 10,
//           name: 'image',

//           iconFamily: 'iconfont',
//           iconColor: '#282222'
//         }
//       },
//       {
//         name: '控制器',
//         icon: 'icon-kongzhiqi',
//         data: {
//           id: '控制器',
//           text: '',
//           rect: {
//             width: 40,
//             height: 40
//           },
//           paddingLeft: 10,
//           paddingRight: 10,
//           paddingTop: 10,
//           paddingBottom: 10,
//           name: 'image',

//           iconFamily: 'iconfont',
//           iconColor: '#000000'
//         }
//       },
//       {
//         name: '交换机',
//         icon: 'icon-jiaohuanji',
//         data: {
//           id: '交换机',
//           text: '',
//           rect: {
//             width: 40,
//             height: 40
//           },
//           paddingLeft: 10,
//           paddingRight: 10,
//           paddingTop: 10,
//           paddingBottom: 10,
//           name: 'image',

//           iconFamily: 'iconfont',
//           iconColor: '#000000'
//         }
//       },
//       {
//         name: '电视',
//         icon: 'icon-dianshi1',
//         data: {
//           id: '电视',
//           text: '电视',
//           rect: {
//             width: 120,
//             height: 120
//           },
//           paddingLeft: 10,
//           paddingRight: 10,
//           paddingTop: 10,
//           paddingBottom: 10,
//           name: 'image',

//           iconFamily: 'iconfont',
//           iconColor: '#2f54eb'
//         }
//       },
//       {
//         name: '大电网',
//         icon: 'icon-zu',
//         data: {
//           id: '大电网',
//           text: '大电网',
//           rect: {
//             width: 120,
//             height: 120
//           },
//           paddingLeft: 10,
//           paddingRight: 10,
//           paddingTop: 10,
//           paddingBottom: 10,
//           name: 'image',

//           iconFamily: 'iconfont',
//           iconColor: '#2f54eb'
//         }
//       },
//       {
//         name: '开关开',
//         icon: 'icon-kaiguanguan',
//         data: {
//           id: '开关开',
//           text: '开关开',
//           rect: {
//             width: 100,
//             height: 100
//           },
//           paddingLeft: 5,
//           paddingRight: 5,
//           paddingTop: 5,
//           paddingBottom: 5,
//           name: 'image',

//           iconFamily: 'iconfont',
//           iconColor: '#FF0000'
//         }
//       },
//       {
//         name: '开关关',
//         icon: 'icon-kaiguanguan1',
//         data: {
//           id: '开关关',
//           text: '开关关',
//           rect: {
//             width: 120,
//             height: 120
//           },
//           paddingLeft: 10,
//           paddingRight: 10,
//           paddingTop: 10,
//           paddingBottom: 10,
//           name: 'image',

//           iconFamily: 'iconfont',
//           iconColor: '#00FF00'
//         }
//       },
//       {
//         name: '空调',
//         icon: 'icon-zbkongtiao',
//         data: {
//           id: '空调',
//           text: '空调',
//           rect: {
//             width: 120,
//             height: 120
//           },
//           paddingLeft: 10,
//           paddingRight: 10,
//           paddingTop: 10,
//           paddingBottom: 10,
//           name: 'image',

//           iconFamily: 'iconfont',
//           iconColor: '#2f54eb'
//         }
//       },
//       {
//         name: '制冷设备',
//         icon: 'icon-zbzhilengshebei',
//         data: {
//           id: '制冷设备',
//           text: '制冷设备',
//           rect: {
//             width: 120,
//             height: 120
//           },
//           paddingLeft: 10,
//           paddingRight: 10,
//           paddingTop: 10,
//           paddingBottom: 10,
//           name: 'image',

//           iconFamily: 'iconfont',
//           iconColor: '#2f54eb'
//         }
//       },
//       {
//         name: '蓄电池',
//         icon: 'icon-zbdianchi',
//         data: {
//           id: '蓄电池',
//           text: '蓄电池',
//           rect: {
//             width: 120,
//             height: 120
//           },
//           paddingLeft: 10,
//           paddingRight: 10,
//           paddingTop: 10,
//           paddingBottom: 10,
//           name: 'image',

//           iconFamily: 'iconfont',
//           iconColor: '#2f54eb'
//         }
//       },
//       {
//         name: '风机',
//         icon: 'icon-zbfengji',
//         data: {
//           id: '风机',
//           text: '风机',
//           rect: {
//             width: 120,
//             height: 120
//           },
//           paddingLeft: 10,
//           paddingRight: 10,
//           paddingTop: 10,
//           paddingBottom: 10,
//           name: 'image',

//           iconFamily: 'iconfont',
//           iconColor: '#2f54eb'
//         }
//       },
//       {
//         name: '光伏电站',
//         icon: 'icon-zbguangfudianzhan',
//         data: {
//           id: '光伏电站',
//           text: '光伏电站',
//           rect: {
//             width: 120,
//             height: 120
//           },
//           paddingLeft: 10,
//           paddingRight: 10,
//           paddingTop: 10,
//           paddingBottom: 10,
//           name: 'image',

//           iconFamily: 'iconfont',
//           iconColor: '#2f54eb'
//         }
//       },
//       {
//         name: '帅哥',
//         icon: 'icon-zbpeople',
//         data: {
//           id: '帅哥',
//           text: '帅哥',
//           rect: {
//             width: 120,
//             height: 120
//           },
//           paddingLeft: 10,
//           paddingRight: 10,
//           paddingTop: 10,
//           paddingBottom: 10,
//           name: 'image',

//           iconFamily: 'iconfont',
//           iconColor: '#2f54eb'
//         }
//       },
//       {
//         name: '正方形',
//         icon: 'icon-rect',
//         data: {
//           id: '正方形',
//           text: '正方形',
//           rect: {
//             width: 120,
//             height: 120
//           },
//           paddingLeft: 10,
//           paddingRight: 10,
//           paddingTop: 10,
//           paddingBottom: 10,
//           name: 'rectangle',

//           iconFamily: 'topology',
//           iconColor: '#2f54eb'
//         }
//       },
//       {
//         name: 'rectangle',
//         icon: 'icon-rectangle',
//         data: {
//           id: '圆角矩形',
//           text: '圆角矩形',
//           rect: {
//             width: 200,
//             height: 50
//           },
//           paddingLeft: 10,
//           paddingRight: 10,
//           paddingTop: 10,
//           paddingBottom: 10,
//           borderRadius: 0.1,
//           name: 'rectangle'
//         }
//       },
//       {
//         name: 'circle',
//         icon: 'icon-circle',
//         data: {
//           id: '圆',
//           text: '圆',
//           rect: {
//             width: 100,
//             height: 100
//           },
//           name: 'circle',
//           textMaxLine: 1
//         }
//       },
//       {
//         name: 'triangle',
//         icon: 'icon-triangle',
//         data: {
//           id: '三角形',
//           text: '三角形',
//           rect: {
//             width: 100,
//             height: 100
//           },
//           name: 'triangle'
//         }
//       },
//       {
//         name: 'diamond',
//         icon: 'icon-diamond',
//         data: {
//           id: '菱形',
//           text: '菱形',
//           rect: {
//             width: 100,
//             height: 100
//           },
//           name: 'diamond'
//         }
//       },
//       {
//         name: 'pentagon',
//         icon: 'icon-pentagon',
//         data: {
//           id: '五边形',
//           text: '五边形',
//           rect: {
//             width: 100,
//             height: 100
//           },
//           name: 'pentagon'
//         }
//       },
//       {
//         name: 'hexagon',
//         icon: 'icon-hexagon',
//         data: {
//           id: '六边形',
//           text: '六边形',
//           rect: {
//             width: 100,
//             height: 100
//           },
//           paddingTop: 10,
//           paddingBottom: 10,
//           name: 'hexagon'
//         }
//       },
//       {
//         name: 'pentagram',
//         icon: 'icon-pentagram',
//         data: {
//           id: '五角星',
//           text: '五角星',
//           rect: {
//             width: 100,
//             height: 100
//           },
//           name: 'pentagram'
//         }
//       },
//       {
//         name: 'leftArrow',
//         icon: 'icon-arrow-left',
//         data: {
//           id: '左箭头',
//           text: '左箭头',
//           rect: {
//             width: 200,
//             height: 100
//           },
//           name: 'leftArrow'
//         }
//       },
//       {
//         name: 'rightArrow',
//         icon: 'icon-arrow-right',
//         data: {
//           id: '右箭头',
//           text: '右箭头',
//           rect: {
//             width: 200,
//             height: 100
//           },
//           name: 'rightArrow'
//         }
//       },
//       {
//         name: 'twowayArrow',
//         icon: 'icon-twoway-arrow',
//         data: {
//           id: '双向箭头',
//           text: '双向箭头',
//           rect: {
//             width: 200,
//             height: 100
//           },
//           name: 'twowayArrow'
//         }
//       },
//       {
//         name: '直线',
//         icon: 'icon-line',
//         data: {
//           id: '直线',
//           text: '直线',
//           rect: {
//             width: 100,
//             height: 100
//           },
//           name: 'line',
//           borderWidth: 10,
//           boderColor: '#DC143C',
//           icon: '\ue64d',
//           iconFamily: 'topology',
//           iconColor: '#fff'
//         }
//       },
//       {
//         name: 'cloud',
//         icon: 'icon-cloud',
//         data: {
//           id: '云',
//           text: '云',
//           rect: {
//             width: 100,
//             height: 100
//           },
//           name: 'cloud'
//         }
//       },
//       {
//         name: 'message',
//         icon: 'icon-msg',
//         data: {
//           id: '消息框',
//           text: '消息框',
//           rect: {
//             width: 100,
//             height: 100
//           },
//           paddingLeft: 10,
//           paddingRight: 10,
//           paddingTop: 10,
//           paddingBottom: 10,
//           name: 'message'
//         }
//       },
//       {
//         name: 'file',
//         icon: 'icon-file',
//         data: {
//           id: '文档',
//           text: '文档',
//           rect: {
//             width: 80,
//             height: 100
//           },
//           paddingLeft: 10,
//           paddingRight: 10,
//           paddingTop: 10,
//           paddingBottom: 10,
//           name: 'file'
//         }
//       },
//       {
//         name: 'text',
//         icon: 'icon-text',
//         data: {
//           id: '文本',
//           text: '文本',
//           rect: {
//             width: 160,
//             height: 30
//           },
//           name: 'text'
//         }
//       },
//       {
//         name: 'image',
//         icon: 'icon-image',
//         data: {
//           id: '图片',
//           text: '',
//           rect: {
//             width: 100,
//             height: 100
//           },
//           name: 'image',
//           image: '/assets/img/logo.png'
//         }
//       },
//       {
//         name: 'cube',
//         icon: 'icon-cube',
//         data: {
//           rect: {
//             width: 50,
//             height: 70
//           },
//           is3D: true,
//           z: 10,
//           zRotate: 15,
//           fillStyle: '#ddd',
//           name: 'cube',

//           iconFamily: 'topology',
//           iconColor: '#777',
//           iconSize: 30
//         }
//       },
//       {
//         name: 'people',
//         icon: 'icon-people',
//         data: {
//           rect: {
//             width: 70,
//             height: 100
//           },
//           name: 'people'
//         }
//       },
//       {
//         name: '视频/网页',
//         icon: 'icon-pc',
//         data: {
//           id: '视频',
//           text: '视频/网页',
//           rect: {
//             width: 200,
//             height: 200
//           },
//           paddingLeft: 10,
//           paddingRight: 10,
//           paddingTop: 10,
//           paddingBottom: 10,
//           // strokeStyle: 'transparent',
//           name: 'div'
//         }
//       }
//     ]
//   }
// ]
